<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div id="chart-risk-2" class="chart"></div>
      <ul class="towerlist">
        <li class="item">
          <div class="title">纳入监测表单字段</div>
          <div class="subtitle num fg-green">{{monitoredFormData}}</div>
        </li>
        <li class="item">
          <div class="title">未应用验证机制字段</div>
          <div class="subtitle num fg-red">{{invalidatedFormData}}</div>
        </li>
        <li class="item">
          <div class="title">验证机制覆盖率</div>
          <div class="subtitle num fg-cyan">
            {{validationAppliedPercentage}}
            <small>%</small>
          </div>
        </li>
      </ul>
      <x-loading v-if="showLoading"></x-loading>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import bus from '@/utils/bus'

export default {
  data() {
    return {
      hintText: "显示本年数据验证机制覆盖数据",
      monitoredFormData: 0,
      invalidatedFormData: 0,
      validationAppliedPercentage: 0,
      showLoading: false,
      chartInstance: null,
      option: null,
      chartData: null,
      //URLHEAD2: "http://localhost:2194/Interface/API.aspx?HTTEST=test&Method="
      URLHEAD2: "http://114.115.153.22:2222/Interface/API.aspx?HTTEST=test&Method="
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      axios.get(this.URLHEAD2 + "SJYZJZFGQK").then(res => {
        let json = res.data;
        
        this.monitoredFormData = json.Data.JC_Count;
        this.invalidatedFormData = json.Data.WJC_Count;
        this.validationAppliedPercentage = 100-json.Data.WJC_Ratio;
        bus.$emit('complete3',this.validationAppliedPercentage);
        this.option = {
          tooltip: { trigger: "item", formatter: "{b} : {c} ({d}%)" },
          grid: { y2: 50, y: 20 },
          color: [
            "#73ccd2",
            "#ab1e2e",
            "#117aa9",
            "#ed1875",
            "#aa66cc",
            "#33b5e5",
            "#fb6c07",
            "#fc450e"
          ].reverse(),
          series: [
            {
              name: "验证覆盖情况",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              roseType: "radius",
              label: { show: true, formatter: "{b}\n{d}%" },
              data: json.Data.DataList.map(item=>{
                  return {
                      name:item.Name,
                      value:item.Data
                  }
              }),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        this.chartInstance = this.$Crender("chart-risk-2", this.option);
        this.showLoading = false;
      });
    }
  }
};
</script>
<style scoped>
</style>
